import {useRoutes} from 'react-router-dom'
 
// 导入4个组件
import Login from '../views/user/Login'
import Admin from '../views/admin/Admin'
import Dash from '../views/admin/Dash'
import Private from '../views/Private'
import OrderList from '../views/admin/order/OrderList'
// 导入订单详情
import OrderDetail from '../views/admin/order/OrderDetail'
import Rich from '../views/admin/Rich'
import Style from '../views/admin/Style'
import InterView from '../views/admin/InterView'
import { useEffect, useState,lazy ,Suspense} from 'react'
import {store} from '../store/index'
const lazyLoad = (name)=>{
	const Module = lazy(()=>import(`../views/admin/${name}`))
	return <Module/>
}

function RouterView() {
   
    var baseRoutes = [      
        {path:"",element:<Login></Login>},
        {path:"/login",element:<Login></Login>},
        {path:"/admin/*",element:<Private><Admin></Admin></Private>,
        children:[
            {path:"dash",element:<Dash></Dash>},
            {path:"rich",element:<Rich></Rich>},
            {path:"style",element:<Style></Style>},
            {path:"interview",element:<InterView></InterView>},
            {path:"orderlist",element:<OrderList></OrderList>},
            // 配置订单详情路由
            {path:"orderdetail/:id",element:<OrderDetail></OrderDetail>
        }]
        }

    ]
    function add(){
        var list = ["Youa","Youb"];
        const temp = list.map(item=>({
            path:item,
            element:lazyLoad(item)
        }))
        baseRoutes[2].children = [...baseRoutes[2].children,...temp]
        // 改变路由的dynaRoutes
        store.dispatch({type:"SET_ROUTES",value:baseRoutes})
    }
    const [rout,setRout] =useState(baseRoutes);
    var  element;
    store.subscribe(()=>{
        console.log(store.getState().dynaRoutes)
        setRout(store.getState().dynaRoutes)
        //  element = useRoutes(rout)
    })
    element = useRoutes(rout)
    // useEffect(()=>{
       
    //     setRout(rout)
    // },[rout])
    // 配置路由
    
   
    return ( 
        <Suspense fallback={<h2>Loading..</h2>}>{element}<button onClick={add}>get</button></Suspense> );
}
 // 导出路由
export default RouterView;